<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环渲染 对象</title>
</head>
<body>
<div id="app">
  <div>{{ person }}</div>
  <br>

  <ol>
    <li>{{ person.name }}</li>
    <li>{{ person.age }}</li>
    <li>{{ person.gender }}</li>
  </ol>
  <br>

  <ul>
    <li v-for="item in person">{{ item }}</li>
  </ul>
  <ul>
    <li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
  </ul>

  <ul style="list-style-type: None;padding-inline-start: 0px;">
    <li v-for="(value, key, index) in person">{{ index }} {{ key }}: {{ value }}</li>
  </ul>
</div>
<script type="module">
    import {createApp, reactive} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup(){
            let person = reactive({
              name: "abcque",
              age: 18,
              gender: "M",
            })
            return {
                person,
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>